<template>
    <!-- 班级管理添加 -->
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <em class="el-icon-lx-calendar"></em>班级管理 </el-breadcrumb-item>
                <el-breadcrumb-item>查找班级</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container" v-if="allinfoVisible">
            <div class="form-box">
                <el-form ref="form" :model="query" label-width="80px" class="findform">
                    <el-form-item label="班主任" class="findinput">
                        <el-select v-model="query.headmaster" placeholder="请选择">
                            <div v-for="(item, index) in headmasterlist" :key="index">
                                <el-option :key="item.value" :label="item.value" :value="item.value"></el-option>
                            </div>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="班级名称" class="findinput">
                        <el-select v-model="query.classname" placeholder="请选择" change="xxx()" clearable>
                            <div v-for="(item, index) in classnamelist" :key="index">
                                <el-option :key="item.value" :label="item.value" :value="item.value"></el-option>
                            </div>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="班级编号" class="findinput">
                        <el-input style="width: 200px" placeholder="例：20-10" v-model="query.name" maxlength="5" show-word-limit clearable>
                        </el-input>
                    </el-form-item>
                    <el-button type="primary" @click="handleSearch">搜索</el-button>
                </el-form>
            </div>

            <el-table
                v-loading="loading"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(50,65,87)"
                :data="tableData"
                border
                stripe
                height="393"
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
                :row-style="{ height: '70px' }"
            >
                <!-- <el-table-column prop="cid" label="编号" width="55" align="center"></el-table-column> -->
                <el-table-column prop="name" label="班级名称" align="center"></el-table-column>
                <el-table-column prop="classname" label="班级别名" align="center"></el-table-column>
                <el-table-column prop="course" label="主学课程" align="center"></el-table-column>
                <el-table-column prop="headmaster" label="班主任" align="center"></el-table-column>
                <el-table-column prop="begindate" label="开班时间" align="center"></el-table-column>
                <el-table-column prop="duration" label="课程时长" align="center">
                    <template slot-scope="scope">{{ scope.row.duration }}个月</template>
                </el-table-column>
                <el-table-column prop="enddate" label="毕业时间" align="center"></el-table-column>
                <el-table-column prop="status" label="状态" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.status == -1 ? '试听' : scope.row.status == 0 ? '在读' : '毕业' }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="160" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-edit" @click="classupdate(scope.$index, scope.row)">修改</el-button>
                        <el-button type="text" icon="el-icon-lx-moreandroid" class="red" @click="classdetails(scope.$index, scope.row)"
                            >班级统计</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="pagination" v-if="pageTotal != 0">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="query.pageIndex"
                    :page-size="query.pageSize"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>
        <class-allinfo :options1="options1" :options2="options2" v-if="!allinfoVisible" @allinfoback="allinfoemit"></class-allinfo>
    </div>
</template>

<script>
import { allHeadmaster, findClass, countClass,CountStuByadress, CountStudentBysex } from '../../api/index';
import ClassAllinfo from './ClassAllinfo.vue';
export default {
    name: 'findclass',
    components: {
        ClassAllinfo
    },
    mounted: function () {
        this.getAllheadmaster();
    },
    beforeRouteEnter (to, from, next) {
        next(vm => {
            vm.handleSearch()
        })
    },
    data() {
        return {
            query: {
                classname: '', //班级别名
                headmaster: '', //班主任
                name: '', //班级名称
                pageIndex: 1,
                pageSize: 5
            },
            pageTotal: 0,
            classnamelist: [
                {
                    value: '王者班'
                },
                {
                    value: '荣耀班'
                },
                {
                    value: '英雄班'
                },
                {
                    value: '联盟班'
                }
            ],
            // 班主任
            headmasterlist: [],
            // 表格数据
            tableData: [],
            // 加载动画
            loading: true,
            // 控制显示班级全部信息
            allinfoVisible: true,
            findallinfo: true,
            options1: {
                type: 'pie',
                title: {
                    text: '男女比例'
                },
                legend: {
                    position: 'left'
                },
                bgColor: '#fbfbfb',
                labels: ['男', '女'],
                datasets: [
                    {
                        data: [8, 2]
                    }
                ]
            },
            options2: {
                type: 'ring',
                title: {
                    text: '地域分布'
                },
                legend: {
                    position: 'right'
                },
                bgColor: '#fbfbfb',
                labels: ['河南', '江苏', '河南'],
                datasets: [
                    {
                        data: [5, 5, 5]
                    }
                ]
            }
        };
    },
    methods: {
        getAllheadmaster() {
            var that = this;
            allHeadmaster().then((res) => {
                that.query.headmaster = res[0];
                that.headmasterlist = [];
                for (let i = 0; i < res.length; i++) {
                    that.headmasterlist.push({ value: res[i] });
                }
                that.findclass();
            });
        },
        // 通过query对象查询班级信息
        findclass() {
            var that = this;
            countClass(this.query).then((res) => {
                that.pageTotal = res;
                // console.log("总数：" + res)
            });
            findClass(this.query).then((res) => {
                console.log(res);
                that.tableData = res;
                setTimeout(() => {
                    that.loading = false;
                }, 300);
            });
        },
        handleSearch() {
            this.loading = true;
            this.query.pageIndex = 1;
            this.findclass();
        },
        // 修改操作
        classupdate(index, row) {
            this.$router.push({
                name: 'updateclass',
                params: {
                    headmasterlist: this.headmasterlist,
                    classlist: row
                }
            });
            this.editVisible = true;
        },
        // 查看班级全部信息
        classdetails(index, row) {
            var that = this
            this.allinfoVisible = false;
            this.$set(this, 'findid', row.cid);
            let query = {cid: row.cid}
            CountStuByadress(query).then(res => {
                console.log(res);
                let label = []
                let dataset = []
                for (let key in res) {
                    if (key == null) {
                        break
                    }
                    label.push(key)
                    dataset.push(res[key])
                }
                if (label != '') {
                    that.options2.labels = label
                    that.options2.datasets[0].data = dataset
                }
                console.log(that.options2);
            })
            CountStudentBysex(query).then(res => {
                console.log(res);
                let label = []
                let dataset = []
                for (let key in res) {
                    if (key == null) {
                        break
                    }
                    label.push(key)
                    dataset.push(res[key])
                }
                if (label != '') {
                    that.options1.labels = label
                    that.options1.datasets[0].data = dataset
                }
                console.log(that.options1);
            })
        },
        // 分页导航
        handlePageChange(val) {
            console.log(val);
            this.$set(this.query, 'pageIndex', val);
            this.loading = true;
            this.findclass();
        },
        allinfoemit() {
            this.allinfoVisible = true
        }
    }
};
</script>

<style scoped>
.form-box {
    width: 1200px;
}
.findform {
    width: 100%;
}
.findinput {
    float: left;
    padding-right: 10px;
}
</style>